$choosed = $(".choosed");
$choosed.on("click", function () {
    $(".choicebox").css({
        display: "block"      
    });     
    return false;
})
$choicebox = $(".choicebox");
var choosed = document.querySelector(".choosed");
$(".choices").on("click",function(evt){
    var e = evt ||event;
    var target = e.target || e.srcElement;
    // console.log(target);
    choosed.innerHTML = target.innerHTML +"<i class='fa fa-caret-down'></i>";
    
    // console.log(choosed);
    $choicebox.css({
        display:"none"
    })
})
//  吸顶菜单
var $header = $("#header");

$(window).scroll(function(){
    var scrollTop = $("html,bady").scrollTop();
    if(scrollTop >= 80){
        $header.addClass("header_anm");
        $(".header-content2").css({
            display:"block",
            top:-8
        })
        $(".CarShop").css({
            display:"none"
        })
        $(".nav").css({
            top:50
        })
        $(".header-bottom").css({
            top:0,
            backgroundColor:"#fff"          
        })
        $(".header-bottom a").css({
            color:"#000"
        })
    }else{
        $header.removeClass("header_anm");
        $(".header-content2").css({
            display:"none",
            
        })
        $(".CarShop").css({
            display:"block"
        })
        $(".nav").css({
            top:80
        })
        $(".header-bottom").css({
            top:80,
            backgroundColor:"#1f1f1f"          
        })
        $(".header-bottom a").css({
            color:"#fff"
        })
    }
})
$(window).trigger("scroll");


// 瀑布流
// 用于设置显示个数的
let next_start = 0;
async function loadJson(start) {
    let url = "http://localhost:3000/dt";
    url += dataToUrl({
        include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
        filter_id: "手工DIY",
        start: start,
        _: Date.now()
    });
    // 通过fetch 发送请求
    let res_ponse = await fetch(url);
    // 会返回一个xhr对象
    // 获取json类型的数据
    let res = await res_ponse.json();
    // console.log(res);
    // 用于记载 数据从第几条开始 继续加载
    next_start = res.data.next_start;
    // 页面渲染
    render(res);
    // 图片排序
    sort();
}
// loadJson();
// 设置一个变量用于存储获取的渲染的元素列表
let data_list = [];
// 页面渲染
function render(res) {
    let list = res.data.object_list;
    data_list.push(...list);
    let html = "";
    for (let i = 0; i < list.length; i++) {
        html += `<div class="grid-item" data-id="${list[i].id}">
        <div class="thumb">
              <img src="${list[i].photo.path}" height=${parseInt(list[i].photo.height / (list[i].photo.width / 332))}>
        </div>
        <div class="detail">
            <h2>${list[i].album.name}<h2>
            <h4>${list[i].msg}</h4>
            <span>${list[i].add_datetime}</span>
            <p>${list[i].sender.username}</p>
            
        </div>
  </div>`;
    }
    document.querySelector(".waterfall-wrapper").innerHTML += html;
}

// 排序

// 设置一个变量存储 每列的最小高度
let global_min_height = null ;
function sort(){
    // 获取渲染进页面的个数
    let list_ele = document.querySelector(".waterfall-wrapper").children;
    // 我们要有一个标准 以第一排 记录每行每一列的高度
    // 设置一个数组，用来存储高度
    let height_array =[];
    for(let i=0;i<list_ele.length;i++){
        if(i<3){
            // 第一排的标准;
            // 把元素当前的高度放入到高度数组之中进行记录;
            height_array.push(list_ele[i].offsetHeight+30);
        }else{
            // 其他的
            // 1. 找到数组之中的最小值;
            // 2. 定位元素到最小值的位置;
            // left : 0 372  => index*372
            // top ：数组中的最小值 => 最小高度

            // false =不关注this的改变，占位;
            let min_height = Math.min.apply(false,height_array);
            // 获取最小高度所在的下标
            let min_index = height_array.indexOf(min_height);
            // 给其他的设置绝对定位
            list_ele[i].style.position = "absolute";
            // 设置后面渲染的 元素位置
            list_ele[i].style.left = min_index *400+"px";
            list_ele[i].style.top = min_height +"px";
            // 拼接之后将数组最小值加上我们刚刚拼接的元素的高度;
            // 更新数组的值，从而不断选择最小值进行拼接
            height_array[min_index] += list_ele[i].offsetHeight;
        }
        // 每次加载完毕从新选择最小值
        global_min_height = Math.min.apply(false,height_array);
        // 把加载状态重置 ：设置为加载完成
        isloading = false;
    }
}
loadJson(0);

// 转动到一定程度 => 逻辑  就加载数据 ; 
// 什么叫做一定程度; 
// 我什么时候加载数据  => 找到四列之中最矮的高度 => 自己求(高度数组); 
// 用户在卷动页面的时候 页面的scrollTop在改变;
// 页面显示的内容高度 ; => scrollTop + clientHeight;

// 获取可视窗口的高度
var clientHeight = document.documentElement.clientHeight;
// 程序是否处于加载状态 设置为否
var isloading = false ; 

// 设置 界面滚动事件 
window.onscroll = function(){
    // 如果渲染没有结束，没必须在此进行渲染
    if(global_min_height === null || isloading ){
        return false;
    }
    // 获取界面滚动的高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 1. 浏览器显示页面的最大高度;
    // 2. 图片长条之中的最小高度;
    if(scrollTop+clientHeight + 500 >= global_min_height){
        console.log("继续加载");
        isloading=true;
        this.loadJson(next_start);
    }
}


// 获取本地localStorage
var cart_list = (function(){
    var  storage = localStorage.getItem("carts");
    if(storage === null){
        return [];
    }else{
        return JSON.parse(storage);
    }   
})(); 

// 获取相应数据进行本地存储
$(".grid-list").on("click",".grid-item",function(){
    // 先获取元素 parent()父级 这里需要看你点击的元素的位置以及你设置data-id的元素
    let $index = $(this).attr("data-id");
    // console.log($index);
    // console.log(data_list);
    var i = $(".grid-list .grid-item").index($(this))
    console.log(i);
    var item = data_list[i];
    // console.log(item);
    
    // 保存到本地
    localStorage.setItem("cart",JSON.stringify(item));
    location.assign("../html/xqandfd.html");
})
